<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>大口吃肉吧</title>
    
    <!-- Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico" />
    
    <!-- CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    
    <!-- Google Fonts -->
    <link href='http://fonts.useso.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>

</head>

<body>

    <!-- Start: Preloader -->
    <div id="preloader">
        <div id="loader"></div>
    </div>
    <!-- End: Preloader -->

    <!-- Start: Main Content -->
    <div class="main-container">

        <!-- Start: Home -->
        <section class="home-section">
                                         <div class="container">
                                <div class="row">
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                <h1>欢迎光临，大口吃肉吧</h1>

                                                <p>
                                                        在这里我们大口吃肉,敞开了吃,快意人生
                                                        ～(￣▽￣～)╮(*￣︶￣*)╭╰（￣▽￣）╭（￣︶￣）↗<br />
                                                </p>
                                        </div>
                                </div>
            </div>
                                                <p>下滑选肉↓</p>
        </section>
        <!-- End: Home -->

                <!-- Start: Content -->
        <section class="content-section"id="app">
            <div class="container">

                                <div class="row">
                                        <div class="col-md-12">
                                                <h2 class="page-header"><span>{{author}}</span></h2>
                                        </div>
                                        <div class="col-md-6">
                                                <div class="lt-tables">
                                                        <p class="lead text-muted"></p>
                                                        <div class="lt-box">
                                                                <div class="table-responsive">
                                                                        <table class="table table-hover">
                                                                                <thead> 
																					   <tr>
                                                                                                <th>肉名</th>
                                                                                                <th>价格</th>
                                                                                                <th>选择</th>
                                                                                        </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                        <tr v-for="dish in dishes">
                                                                                                <th>{{dish.name}}</th>
                                                                                                <th>{{dish.price/100}}金币</th>
                                                                                                <td><a href="#" class="btn btn-default-alt">选择这块肉</a></li></td>
                                                                                        </tr>
                                                                                </tbody>
                                                                        </table>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>

		</section>
        <!-- End: Content -->

        <!-- Start: Footer-->
        <footer class="footer">
            <p>Lite <i class="fa fa-coffee"></i> Collect from <a href="http://www.cssmoban.com/" title="大口吃肉吧" target="_blank">ariza</a> - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="大口吃肉吧">ariza</a></p>
        </footer>
        <!-- End: Footer -->

    </div>
    <!-- End: Main Content -->

    <!-- Javascript Files -->
	 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/jquery.pagination.js"></script>
        <script type="text/javascript" src="js/jquery.knob.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
        el: '#app',
        data:{
                author:'要开始喽~',
                                dishes:[
                                ]
        },
		 methods : {
                get_dishes(){
                                //从服务器上获取菜品数据
                                //ajax (http客户端)
                                //JQuery库用到的ajax很方便
                                $.ajax({
                                        type: "get",
                                        url: "http://192.168.157.128:9094/dish",
                                        context: this,//此处的this指的是app这个Vue对象
                                        success: fuction(data,status) 
                                                {
                                        this.dishes = data;//此处 的this指的是context的值.如果context没有值那么就指的是$这个JQuery的对象.：
                                                }
                                        });
                        }

                },
        })
        app.get_dishes();
    </script>

</body>
</html>